<template>
    <div class="v-rushHour">
        <Card :bordered="true">
            <p slot="title">客流高峰期</p>
            <div slot="extra">
                <Dropdown trigger="custom" :visible="visible" class="v-dropdown" @on-clickoutside="handleClose" style="min-width: 240px;" placement="top-end">
                  <span @click="handleOpen">
                      门店筛选
                      <Icon type="arrow-down-b"></Icon>
                  </span>
                  <DropdownMenu slot="list">
                      <CheckboxGroup v-model="areaNameCheck">
                          <Checkbox v-for="(item, index) in searchAreas" :key="index" :label="item.areaName"></Checkbox>
                      </CheckboxGroup>
                      <div style="text-align: right; margin:10px;">
                          <Button type="primary" @click="handleSubmit">确定</Button>
                      </div>
                  </DropdownMenu>
                </Dropdown>
              </div>
            <div id="rushHour2"></div>
        </Card>
    </div>
</template>

<script>
import { mapState } from 'vuex'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/heatmap');
require("echarts/lib/chart/scatter");
require("echarts/lib/component/calendar");
require("echarts/lib/component/visualMap");

export default {
    name: "v-rushHour",
    props: {},
    data() {
        return {
            searchAreas: [],
            areaName: '',
            areaCode: '',
            visible: false,
            areaNameCheck: [],
            myChart: null
        }
    },
    created() {
        this.SearchAreas()
    },
    computed: {
        ...mapState({
            sideBarWidth: state => state.sideBarWidth,
            getAjaxParams: state => state.timeParams
        })
    },
    watch: {
        getAjaxParams(val) {
            if (this.areaCode !== '') {
                this.RushHourData(Object.assign({}, val, {areaCodes: this.areaCode}))
                this.$store.dispatch('SetDownLink', Object.assign({}, val, {areaCodes: this.areaCode}))
            }
        },
        sideBarWidth (val) {
          setTimeout(() => {
            this.myChart.resize()
          }, 200)
        }
    },
    mounted() {},
    methods: {
        RushHourData(params) {
            this.$store.dispatch('SpinShow', true)
            this.$store.dispatch('RushHourData', params).then((res) => {
                if (res.success === '1') {
                    this.$store.dispatch('SpinShow', false)
                    var json = res;
                    //日期转换时间
                    function dateToWeekDay(dateStr) {
                        var myDate = new Date(Date.parse(dateStr.replace(/-/g, "/")));
                        return myDate.getDay();
                    }
                    this.myChart = echarts.init(document.getElementById('rushHour2'));
                    var app = {};
                    var option = null;
                    app.title = '笛卡尔坐标系上的热力图';

                    var jsonData = json["data"];
                    var hours = []
                    for(var v in jsonData){
                        var dataNum = jsonData[v]["date"].replace(/-/g,"")
                        hours[dataNum]=jsonData[v]["date"];
                    }
                    var t = []
                    for(var v in hours){
                        t.push(hours[v])
                    }

                    var hours = t
                    var days = ['0:00~0:59', '1:00~1:59', '2:00~2:59', '3:00~3:59', '4:00~4:59',
                        '5:00~5:59', '6:00~6:59',
                        '7:00~7:59', '8:00~8:59', '9:00~9:59', '10:00~10:59', '11:00~11:59',
                        '12:00~12:59', '13:00~13:59',
                        '14:00~14:59', '15:00~15:59', '16:00~16:59', '17:00~17:59', '18:00~18:59',
                        '19:00~19:59', '20:00~20:59',
                        '21:00~21:59', '22:00~22:59', '23:00~23:59'
                    ];
                    days.reverse();

                    function checkDateInArrNUM(date,hours){
                        for(var i=0;i<hours.length;i++){
                            if(date==hours[i]){
                                return i;
                            }
                        }
                    }

                    //整理data数据
                    var _data = []
                    var maxEnters = 0
                    var jsonData = json["data"];
                    for (var v in jsonData) {
                        maxEnters = parseInt(jsonData[v]["enters"]) > maxEnters ? parseInt(jsonData[v][
                            "enters"
                        ]) : maxEnters;

                        var item = [days.length - 1 - parseInt(jsonData[v]["hour"]), checkDateInArrNUM(jsonData[v]["date"],hours), parseInt(jsonData[v]["enters"])]

                        _data.push(item)
                    }
                    var data = _data

                    data = data.map(function (item) {
                        return [item[1], item[0], item[2] || '-']
                    })

                    option = {

                        animation: false,
                        grid: {
                            // top: '5px',
                            right: '20px',
                            left: '100px'
                            //height: '50%',
                            //y: '100'
                        },
                        xAxis: {
                            type: 'category',
                            data: hours,
                            splitArea: {
                                show: true
                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: days,
                            splitArea: {
                                show: true
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: maxEnters,
                            calculable: false,
                            show: false
                        },
                        series: [{
                            name: 'Punch Card',
                            type: 'heatmap',
                            data: data,
                            label: {
                                normal: {
                                    show: true,
                                    color: '#000000'
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    }
                    this.myChart.setOption(option, true)
                    setTimeout(() => {
                        window.onresize = this.myChart.resize
                    }, 200)
                }
            })
        },
        SearchAreas () {
          this.$store.dispatch('SearchAreas').then((res) => {
            if (res.success === '1') {
              this.searchAreas = res.data
              let _areaNameCheck = []
              let _areaCode = []
              this.searchAreas.map((item) => {
                _areaNameCheck.push(item.areaName)
                _areaCode.push(item.areaCode)
              })
              this.areaNameCheck = _areaNameCheck
              this.areaCode = _areaCode.join(',')
              this.areaName = this.areaNameCheck.join(',')
              this.$store.dispatch('SetAreaParams', {
                areaCode: this.areaCode
              })
              this.RushHourData(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
              this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
            }
          })
        },
        handleOpen () {
          this.visible = true
        },
        handleClose () {
          this.visible = false
        },
        handleSubmit () {
          let _areaCode = []
          this.areaNameCheck.map((item) => {
            this.searchAreas.map((subItem) => {
              if (item === subItem.areaName) {
                _areaCode.push(subItem.areaCode)
              }
            })
          })
          this.areaName = this.areaNameCheck.join(',')
          this.areaCode = _areaCode.join(',')
          this.RushHourData(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
          this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
          this.visible = false
        }
    }
}
</script>

<style lang="less">
    .v-rushHour {
        margin: 0 -6px;
        .v-dropdown {
            text-align: right
          }
          .ivu-dropdown-menu {
            width: 240px;
            padding: 10px 15px;
          }
          .ivu-checkbox-group {
            text-align: left;
          }
        .ivu-card-head p, .ivu-card-head-inner {
            height: 32px;
            line-height: 32px;
            font-size: 24px;
        }
        .ivu-card-head {
            padding: 30px 20px;
            border-bottom: none;
        }
    }
    #rushHour2 {
        width: 100%;
        height: 610px;
    }
</style>
